<template>
  <div id="itemMain" ref="itemRef"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { getYSYXYJByPFMarket } from "../../apis/home";
import { ref } from "vue";
const option = ref();
const myChart = ref();
const timeOut = ref();
const getInit = async () => {
  let nameList = [];
  let dataList = [];
  let dataList1 = [];
  await getYSYXYJByPFMarket().then((res) => {
    res.data.forEach((item) => {
      nameList.push(item.name);
      dataList.push(item.jcsum);
      dataList1.push(item.bhgsum);
    });
  });
  myChart.value = echarts.init(document.getElementById("itemMain"), null, {
    devicePixelRatio: 2.5,
  });
  option.value = {
    title: {
      text: "疑似阳性样品数",
      textStyle: {
        color: "#fff",
        fontSize: 16,
      },
    },
    legend: {
      top: 2,
      left: "50%",
      textStyle: {
        color: "rgba(255,255,255,1)",
        fontSize: "12",
      },
      icon: "stack",
      itemWidth: 10,
      itemHeight: 10,
    },
    grid: {
      bottom: 50,
      left: "12%",
    },
    dataset: {
      dimensions: ["product", "阳性数", "处理数"],
    },
    dataZoom: [
      //滑动条
      {
        xAxisIndex: 0, //这里是从X轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 5, // 一次性展示6个。
      },
    ],
    xAxis: {
      type: "category",
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: "12",
          color: "rgba(255,255,255,1)",
        },
      },
      axisLabel: {
        interval: 0,
        rotate: 40,
        textStyle: {
          fontSize: "12",
          color: "rgba(255,255,255,1)",
        },
      },
      data: nameList,
    },
    yAxis: [
      {
        minInterval: 1,
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: "14",
            color: "rgba(255,255,255,1)",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.1)",
          },
        },
      },
    ],
    series: [
      {
        name: "阳性数",
        type: "bar",
        barWidth: 6,
        itemStyle: {
          color: "#FF9E55",
          barBorderRadius: [12, 12, 0, 0],
        },
        data: dataList,
      },
      {
        name: "处理数",
        type: "bar",
        barWidth: 6,
        itemStyle: {
          color: "#3CFDC2",
          barBorderRadius: [12, 12, 0, 0],
        },
        data: dataList1,
      },
    ],
  };
  myChart.value.setOption(option.value);
  timeOut.value = setInterval(() => {
    if (option.value.dataZoom[0].endValue == dataList.length) {
      option.value.dataZoom[0].endValue = 5;
      option.value.dataZoom[0].startValue = 0;
    } else {
      option.value.dataZoom[0].endValue = option.value.dataZoom[0].endValue + 1;
      option.value.dataZoom[0].startValue =
        option.value.dataZoom[0].startValue + 1;
    }
    myChart.value.setOption(option.value);
  }, 2000);
  window.addEventListener("resize", () => {
    myChart.value.resize();
  });
};

getInit();
</script>

<style scoped lang="scss">
#itemMain {
  width: 100%;
  height: 100%;
}
</style>
